<template lang='pug'>
  div.list-wrap-box
    div.list-group.list-group-custom(v-if="type==='custom'")
      .list-group-item.list-group-item-action.flex-column.align-items-start(
        v-for="(item, index) in listGroup"
        :key="index"
        @click="touchListBlock(item)")
        .d-flex.w-100.justify-content-between
          h5.mb-1 {{item.header}}
          small(v-if="item.badge") {{item.badge}}
        slot(name="list-content")
          p.mb-1 {{item.content}}
        slot(name="list-footer")
          small {{item.footer}}
    ul.list-group.list-group-simple(v-else)
      li.list-group-item.d-flex.justify-content-between.align-items-center(
        v-for="(item, index) in listGroup"
        :key="index"
        @click="touchListBlock(item)")
        .left-important {{item.header}}
        .main {{item.content}}
        .right-important {{item.footer}}
          span.badge.badge-primary.badge-pill(v-if="item.badge") {{item.badge}}
      li.list-group-item.d-flex.justify-content-between.align-items-center(v-if="!listGroup.length")
        h5 {{noData}}
</template>

<script>
/**
 * @name 列表组
 * @author linmn
 */
export default {
  name: 'ListGroup',
  props: {
    type: String,
    listGroup: {
      type: Array,
      default: () => ([])
    },
    noData: String
  },
  data () {
    return {}
  },
  methods: {
    touchListBlock (item) {
      this.$emit('touchListBlock', item)
    }
  }
}
</script>

<style lang='sass' scoped>
.list-group-simple
  .left-important
  .right-important
  .main
    padding: 0 .6em
    flex: 1
    width: 60px
    white-space: nowrap
    text-overflow: ellipsis
    overflow: hidden
</style>
